<template>
<view>
<!--用户归属门店  -->
<block v-if="arr.length>0">
  <!-- <view class="wrap" bindtap='click' data-index="{{index}}">

    <view  class='name'>
      <view class='ListDataItemImage'  wx:if="{{item.logo!=''&&item.logo!='0'}}"><image mode='aspectFill' src='{{item.logo}}'></image></view>

        <view class='ListDataItemImage'  wx:else> <image mode='aspectFill' src='https://image1.sansancloud.com/xianhua/2019_12/12/16/33/7_29.jpg?x-oss-process=style/preview_120'></image></view>
    <view class='nameText'> <text>{{item.name}}</text></view>
      <view class='nameImg' catchtap='clickCatch' data-index="{{index}}"> <image src='https://image1.sansancloud.com/xianhua/2020_4/8/10/32/25_872.jpg?x-oss-process=style/preview_120'></image></view>
    </view>
  </view> -->
  <view class="store_list">
    <view class="store_item" v-for="(item, index) in arr" :key="index" @tap="click" :data-info="item">
      <view class="store_info">
        <view class="store_title">
          <!-- <image src='{{item.logo}}' class='store_logo'></image> -->
          <text class="store_name">{{item.name}}（NO.{{index+1}}）</text>
        </view>
        <view class="store_time_addr">
          <view class="store_time">
            <image class="store_time_icon" src="https://image1.sansancloud.com/santigongxiang/2018_10/10/18/22/0_933.jpg"></image>
            <text class="store_time_value">{{item.openTime}}:00-{{item.closeTime}}:00</text>
          </view>
          <view class="store_addr">
            <image class="store_addr_icon" src="https://image1.sansancloud.com/xianhua/2018_9/13/17/57/21_219.jpg"></image>
            <text class="store_addr_value" v-if="item.address">{{item.address}}</text>
            <text class="store_addr_value" v-else>{{item.province}}-{{item.city}}-{{item.province}}</text>
          </view>
        </view>
      </view>
      <view class="distance" @click.stop="clickCatch" :data-info="item">
        <text class="distance_text" v-if="item.distance">{{publicFun.toFix(item.distance)}}km</text>
        <text class="distance_text" v-else>未设置</text>
        <view class="check_info">
          <text class="check_info_text">去导航</text>
          <image class="check_info_icon" src="https://image1.sansancloud.com/xianhua/2019_1/14/14/5/10_367.jpg"></image>
        </view>
      </view>
    </view>
  </view>
</block>

<!--附近门店  -->
<block v-if="arr.length==0">
<view class="wrap">

  <view class="name">
  <!--左边的图片  -->
    <view class="ListDataItemImage"></view>
<!--中间的文字  -->
  <view class="nameText"> <text>无附近门店</text></view>
</view>
</view>
</block>
</view>
</template>

<script>
import publicFun from '../../wxcomponents/public/publicFun.wxs'

export default {
  data() {
    return {
      arr: null,
      reqDataState: false,
      reqType: "",
      listPage: {
        page: 1,
        pageSize: 0,
        totalSize: 0,
        curpage: 1
      },
      menDian: "",
      reqState: false,
      selectStore: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (option) {
    this.publicFun = publicFun;
    console.log("===option===", option);
    let that = this;

    if (option.order) {
      that.setData({
        reqType: 'order'
      });
    } else {
      that.setData({
        reqType: 'store'
      });
    }

    that.getMendianData();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    let that = this;
    that.listPage.page = 1;
    that.getData(that.menDian, 1);
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    var that = this;

    if (that.reqState) {
      that.setData({
        reqState: false
      });

      if (that.listPage.totalSize > that.listPage.curPage * that.listPage.pageSize) {
        that.listPage.page++; // 组件内的事件

        that.getData(that.menDian, 1);
      } else {
        console.log('到底了', that.listPage.curPage);
      }
    }
  },
  methods: {
    /**
     * 生命周期函数--监听页面加载
     */
    clickCatch: function (e) {
      console.log(e.currentTarget.dataset.info);
      var info = e.currentTarget.dataset.info;
      let latitude = info.latitude;
      let longitude = info.longitude;
      let name = info.name;
      let address = info.address; // 判断金纬度是否为空

      if (latitude == "" || longitude == "") {
        console.log("判断金纬度是否为空");
        wx.showModal({
          title: '提示',
          content: '主人~该门店没有设置位置哦!',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
        return;
      } else {
        wx.openLocation({
          latitude: latitude,
          longitude: longitude,
          scale: 12,
          name: name,
          address: address
        });
      }
    },
    getMendianData: function () {
      var that = this;
      wx.getLocation({
        type: 'gcj02',
        success: function (res) {
          var latitude1 = res.latitude;
          var longitude1 = res.longitude;
          console.log(longitude1 + "..............." + latitude1);
          let menDian = {
            longitude: longitude1,
            latitude: latitude1
          };
          that.setData({
            menDian: menDian
          }); // longitude 经度        
          // 获取门店的样式

          that.getData(that.menDian);
        },
        fail: function (err) {
          console.log(err);
          let menDian = {
            longitude: 0,
            latitude: 0
          }; // longitude 经度        
          // 获取门店的样式

          that.getData(menDian);
        }
      });
    },
    getData: function (menDian, isAdd) {
      let that = this;

      if (!isAdd) {
        isAdd = 2;
      }

      let la1 = that.menDian.latitude;
      let lo1 = that.menDian.longitude;
      console.log("========menDian===========", menDian);
      let menDianYangShi = getApp().globalData.AddClientUrl("/find_mendians.html", menDian, 'get');
      wx.request({
        url: menDianYangShi.url,
        data: menDianYangShi.params,
        header: getApp().globalData.headerPost,
        method: 'GET',
        success: function (res) {
          console.log(res);

          if (res.data.errcode == "-1") {
            console.log('-------');
            wx.showToast({
              title: res.data.errMessage,
              image: '/images/icons/tip.png',
              duration: 2000
            });
          } else {
            console.log('========');
            that.listPage.pageSize = res.data.relateObj.pageSize;
            that.listPage.curPage = res.data.relateObj.curPage;
            that.listPage.totalSize = res.data.relateObj.totalSize;
            let dataArr = that.arr;

            if (isAdd == 1) {
              dataArr = [];
            }

            if (!res.data.relateObj.result || res.data.relateObj.result.length == 0) {
              that.setData({
                arr: null
              });
            } else {
              if (dataArr == null) {
                dataArr = [];
              }

              dataArr = dataArr.concat(res.data.relateObj.result);
              console.log('===1111====', dataArr);

              for (let i = 0; i < dataArr.length; i++) {
                if (dataArr[i].latitude && dataArr[i].latitude != 0 && dataArr[i].longitude && dataArr[i].longitude != 0) {
                  dataArr[i].distance = getApp().globalData.getDistance(la1, lo1, dataArr[i].latitude, dataArr[i].longitude);
                }
              }

              that.setData({
                arr: dataArr
              });
              console.log('===1111====', that.arr);
            }
          }
        },
        fail: function (res) {
          console.log("fail");
          wx.hideLoading();
          getApp().globalData.loadFail();
        },
        complete: function () {
          that.setData({
            reqState: true
          });
        }
      });
    },
    // 设置门店
    setUpMenDian: function (MenDianID) {
      var id = MenDianID;
      let menDianParameter = {
        mendianId: id
      };
      let menDianYangShi = getApp().globalData.AddClientUrl("/location_mendian.html", menDianParameter, 'get');
      wx.request({
        url: menDianYangShi.url,
        data: menDianYangShi.params,
        header: getApp().globalData.headerPost,
        method: 'GET',
        success: function (res) {
          console.log(res);

          if (res.data.errcode == "-1") {
            wx.showToast({
              title: res.data.errMessage,
              image: '/images/icons/tip.png',
              duration: 2000
            });
          } else {
            console.log("设置成功");
          }
        }
      });
    },
    click: function (e) {
      let that = this;

      if (that.reqType == 'order') {
        console.log("订单选择门店");
        let pages = getCurrentPages(); //当前页面

        let prevPage = pages[pages.length - 2]; //上一页面

        prevPage.setData({
          //直接给上移页面赋值
          selectStore: e.currentTarget.dataset.info
        });
      } else {
        console.log("变化门店");
        var info = e.currentTarget.dataset.info;
        getApp().globalData.currentMendianComponentCallback(info);
        console.log(info);
        this.setUpMenDian(info.id);
      }

      wx.navigateBack({
        delta: 1
      });
      return;
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>